<template>
  <div class="main">
    <div class="conversation">
      <div
        v-for="(msg, index) in conversation"
        :key="index"
        :class="msg.role"
        style="margin-top: 0.5em"
      >
        <div v-if="msg.role === 'user'" class="dialog">
          <strong>您：</strong>
          <div class="question" v-html="msg.content"></div>
        </div>
        <div v-else class="dialog">
          <strong>机器人：</strong>
          <dialog-box-com
            :isQuestioning="isQuestioning"
            :content="msg.content"
          ></dialog-box-com>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["conversation", "isQuestioning"],
  components: {
    dialogBoxCom: () => import("@/components/DialogBoxCom.vue"),
  },
};
</script>

<style scoped>
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
}
.conversation {
  width: 100%;
  max-width: 800px;
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  overflow: auto;
  font-size: 16px;
}

.conversation p {
  margin: 10px 0;
}
.user {
  color: #007bff;
}

.assistant {
  text-align: left;
  color: #333;
}
.question {
  width: 320px;
  word-wrap: break-word;
}
</style>